<template>
  <div
    class="chat_message"
    :class="{ currentUserId: data.sendUserId === userInfoStore.getInfo().userId }"
  >
    <div class="chat_message_inner">
      <div
        class="user-icon"
        v-if="data.messageType !== 'common' && data.messageType !== 'withdraw'"
      >
        <UserIcon :src="data.sendUserIcon" :userId="data.sendUserId" />
      </div>
      <div class="info" v-if="data.messageType !== 'withdraw'" @click="getRightClickMenu">
        <div class="msg">
          <div
            class="text_msg"
            v-if="
              data.messageType === 'text' ||
              data.messageType === 'add' ||
              data.messageType === 'reply'
            "
            v-html="data.messageContent"
          ></div>
          <div class="reply_msg" v-if="data.messageType === 'reply'" @click="getReplyMessage">
            <span class="name">{{ data.replyName }}：</span>
            <span class="medium" v-if="data.replyMessageType === 'text'">{{
              data.replyContent
            }}</span>
            <span class="medium" v-if="data.replyMessageType === 'image'">[图片]</span>
            <span class="medium" v-if="data.replyMessageType === 'video'">[视频]</span>
            <span class="medium" v-if="data.replyMessageType === 'voice'">[语音]</span>
            <span class="medium" v-if="data.replyMessageType === 'file'">[文件]</span>
          </div>
          <ImageMessage
            v-if="data.messageType === 'image'"
            :messageContent="data.messageContent"
          />
          <VideoMessage
            v-if="data.messageType === 'video'"
            :messageContent="data.messageContent"
          />
          <FileMessage
            v-if="data.messageType === 'file'"
            :messageContent="data.messageContent"
            :fileSize="data.fileSize"
          />
          <VoiceMessage
            v-if="data.messageType === 'voice'"
            :messageContent="data.messageContent"
            :fileSize="data.fileSize"
          />
        </div>
      </div>
    </div>
    <div class="chat_message_read">
      <span
        class="read_status iconfont icon-yidu"
        v-if="
          data.msgState === 2 &&
          data.contactType === 0 &&
          data.sendUserId === userInfoStore.getInfo().userId
        "
      >
      </span>
      <span
        class="read_status iconfont icon-weidu"
        v-if="
          data.msgState === 1 &&
          data.contactType === 0 &&
          data.sendUserId === userInfoStore.getInfo().userId
        "
      >
      </span>
    </div>
  </div>
</template>

<script setup>
import ImageMessage from "./ImageMessage.vue";
import VideoMessage from "./VideoMessage.vue";
import FileMessage from "./FileMessage.vue";
import VoiceMessage from "./VoiceMessage.vue";

import { useUserInfoStore } from "@/stores/UserInfoStore";
const userInfoStore = useUserInfoStore();

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  currentChatUser: {
    type: Object,
    default: {},
  },
});

const emit = defineEmits(["reloadReply"]);
const getReplyMessage = ()=> {
  emit("reloadReply");
}
</script>

<style lang="scss" scoped>
.chat_message {
  display: flex;
  width: 100%;
  margin-top: 15px;
  flex-direction: column;

  .msg_date {
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin-bottom: 10px;
  }

  .chat_message_inner {
    display: flex;
    .user-icon {
      cursor: pointer;
    }

    .avatar {
      cursor: pointer;
    }

    .el-checkbox {
      margin-right: 3px;
    }

    .info {
      margin-left: 5px;
      position: relative;

      .el-dropdown {
        display: flex;
      }

      .msg {
        .text_msg {
          margin-top: 1px;
          font-size: 12px;
          color: #555;
          background-color: #eaeaea;
          padding: 12px;
          border-radius: 5px;
          max-width: 571px;
          text-align: left; //从左对齐
          white-space: pre-wrap; //显示换行
          overflow-wrap: break-word; //文字内容溢出自动换行
        }
        .reply_msg {
          cursor: pointer;
          margin-top: 2px;
          font-size: 12px;
          background-color: #ddd;
          padding: 12px;
          border-radius: 5px;
          max-width: 571px;
          text-align: left; //从左对齐
          white-space: pre-wrap; //显示换行
          overflow-wrap: break-word; //文字内容溢出自动换行
        }
      }
    }
  }

  .chat_message_read {
    display: flex;

    .read_status {
      font-size: 20px;
      padding: 0px 45px;
      color: #007fff;
    }
  }

  &.currentUserId {
    justify-content: right;
    align-items: end;

    .chat_message_inner {
      flex-direction: row-reverse; //往右排

      .el-checkbox {
        margin-left: 3px;
      }
    }

    .info {
      margin-left: 0;
      margin-right: 5px;
      .msg {
        .text_msg {
          background-color: #409eff;
          color: #eaeaea;
        }
      }
    }
  }
}
</style>
